<template>
  <div class="chat-header">
    <div class="chat-title">{{ title }}</div>
    <div class="close-btn" @click="close">
      <SvgIcon name="close" size="24" />
    </div>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits } from 'vue';
  const props = defineProps({
    title: { type: String, default: 'AI小助手' },
  });
  const emits = defineEmits(['onClose']);
  // 关闭对话框 由于iframe嵌入 因此变成关闭窗口
  const close = () => {
    emits('onClose');
  };
</script>

<style lang="scss" scoped>
  .chat-header {
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    .chat-title {
      color: #dbfaff;
      text-align: center;
      // font-family: 'Alibaba PuHuiTi 2.0';
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      line-height: 1.64;
    }
    // 关闭按钮
    .close-btn {
      position: absolute;
      right: 40px;
      top: 45px;
      opacity: 0.46;
      &:hover {
        opacity: 0.8;
      }
      transition: all 0.3s;
    }
  }
  .close-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
</style>
